<template>

  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>资金</el-breadcrumb-item>
        <el-breadcrumb-item>订单收款统计</el-breadcrumb-item>
      </el-breadcrumb>
      <help-components>
				<span slot="headText">{{helpData.templateName}}</span>
				<p slot="headDescText" v-html="helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			</help-components>
    </div>
    <!--end 面包屑-->
    <!--start content-->
    <div class="content">

      <!--高级搜索  start 暂时不要-->
      <div class="height-search" style="display: none;">
        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_heightSearch"></div>
        </transition>
        <transition name="slideDown">
          <div class="height-s-con dingdan-shu" v-show="vue_heightSearch">
            <p class="search-title">高级搜索</p>
            <el-form ref="Form" :model="form" label-width="80px">
              <el-form-item label="客户名称" prop="memberName">
                <el-input v-model="saleOrderQb.memberName"></el-input>
              </el-form-item>
              
              <!--<el-form-item label="归属部门" prop="level">
                <el-select v-model="form.level" placeholder="请选择">
                  <el-option label="普通" value="puTong"></el-option>
                  <el-option label="VIP" value="vip"></el-option>
                </el-select>
              </el-form-item>-->
              
		          <el-form-item label="付款状态" prop="orderPayState">
										    <el-select v-model="form.ddlistKey" placeholder="请选择">
										    	<el-option label='请选择' value=''>
													请选择
													</el-option>
										      <el-option v-for="item in orderPayStateViewVoList" :label="item.ddlistName" :value="item.ddlistKey"></el-option>
										    </el-select>
							</el-form-item>
              <el-form-item label="下单时间" prop="level" min-width="220px">
                <el-date-picker v-model="form.createTime" type="daterange" placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
              
              <!--<el-form-item label="客户级别" prop="department">
                <el-select v-model="form.department" placeholder="请选择">
                  <el-option label="研发部" value="yf"></el-option>
                  <el-option label="人事部" value="rs"></el-option>
                </el-select>
              </el-form-item>-->
              <!--<el-form-item label="客户状态" prop="department">
                <el-select v-model="form.department" placeholder="请选择">
                  <el-option label="研发部" value="yf"></el-option>
                  <el-option label="人事部" value="rs"></el-option>
                </el-select>
              </el-form-item>-->
              <el-form-item label-width="15px">
                <el-button @click="advSearch_searchSure(saleOrderQb.memberName,form.ddlistKey)" type="primary">确定</el-button>
                <el-button @click="advSearch_searchCancel">取消</el-button>
                <el-button @click="advSearch_searchClear" type="text">清空</el-button>
              </el-form-item>
            </el-form>

          </div>
        </transition>
      </div>
      <!--高级搜索  end-->

      <!--ziJin-conOrder  start-->
      <div class="ziJin-conOrder">
        <!--头部  start-->
        <div class="zJ-header1">
            <div class="slideBtn fl manyPay" @click.stop="this.vue_allOrder=!this.vue_allOrder">
	            <el-select v-model="form.ddlistKey"  placeholder="全部付款状态" @change="queryByDataBillstate">
								<el-option label='全部付款状态' value=''>
									全部付款状态
								</el-option>
								<el-option v-for="item in orderPayStateViewVoList" :label="item.ddlistName" :value="item.ddlistKey"></el-option>
							</el-select>
					</div>
            
            <div class="block fl dingdanshou">
              <el-date-picker
                v-model="vue_valueData"
                type="daterange"
                @change="dateChange"
                placeholder="选择日期范围">
              </el-date-picker>
            </div>
            <div class="public-left clearfix">
              <div class="goods-input">
                <input type="text" v-model="saleOrderQb.memberName" placeholder="请输入客户名称" @keydown.enter="queryByMemberName"/><i @click="queryByMemberName"></i>
              </div>
              
              
             <!-- <span class="fl high_search" @click="heightSearch=true">高级搜索</span>-->
            </div>
            <!--<el-button type="primary" class="fr">导出</el-button>-->
          </div>
        </div>
        <!--头部   end-->

        <!--资金块状展示  start-->
        <div class="moneyList">
          <div class="moneyListCon">
            <div class="div1">
              <div class="fund-totalBlance-val">{{this.orderTotalMoneySum}}</div>
              <div class="fund-totalBlance-txt">应收金额总计</div>
              <!--<p class="yS_all">
                <span>订货金额：5,463.20</span>
                <span>运费：0.00</span>
              </p>-->
            </div>
          </div>
          <div class="moneyListCon">
            <div class="div2">
              <div class="fund-totalBlance-val">{{this.orderPaidMoneySum}}</div>
              <div class="fund-totalBlance-txt">已收金额总计</div>
            </div>
          </div>
          <div class="moneyListCon">
            <div class="div3">
              <div class="fund-totalBlance-val">{{this.orderUnpaidMoneySum}}</div>
              <div class="fund-totalBlance-txt">待收金额总计</div>
            </div>
          </div>
        </div>
        <!--资金块状展示  end-->

        <!--table表格   start-->
        <div class="table-box" ref="contentWrap">
          <el-table
            :data="saleOrderSet.list"
            style="width: 100%"
            @sort-change="vFun_sort"
            :max-height="vue_tableH">
            <el-table-column
              prop="createDateStr"
              sortable="custom"
              label="下单时间"
              width="261">
            </el-table-column>
            <el-table-column
            	sortable="custom"
              label="客户名称"
              width="155"
              prop="memberBname">
             <template scope="scope">
                <p class="goTo" v-html='scope.row.memberBname ' @click="goTo"></p>
              </template>
            </el-table-column>

            <el-table-column
              prop="orderCode"
              sortable="custom"
              label="单号"
              width="200">
            </el-table-column>
            <!--<el-table-column
              prop="payType"
              label="订货金额"
              width="154">
            </el-table-column>
            <el-table-column
              prop="money"
              label="运费"
              width="154">
            </el-table-column>-->
            <el-table-column
            	sortable="custom"
              label="应收金额"
              width="142"
              prop="orderTotalMoney">
            </el-table-column>
            <el-table-column
              prop="orderPaidMoney"
              sortable="custom"
              label="已收金额"
              width="142">
            </el-table-column>
            <el-table-column
              prop="orderUnpaidMoney"
              sortable="custom"
              label="待收金额"
              width="142">
            </el-table-column>
            <el-table-column
              label="付款状态"
              prop="orderPayStateStr"
              min-width="220">
            </el-table-column>
            <el-table-column
              fixed="right"
              label=""
              width="60">
              <template scope="scope">
                <el-popover trigger="hover" placement="bottom">
                  <p class="p" style="cursor: pointer;" @click="row_orderDatails(scope.row.orderCode)"><em class="iconfont"  style="font-size: 15px">&#xe656;</em>详情</p>
                  <div slot="reference" class="name-wrapper" v-if="scope.row.accountReceivable!='0.00'">
                    <em class="iconfont tab-hover">&#xe607;</em>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!--table表格  end-->

        <!--分页  start-->
        <div class="block fen">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="saleOrderSet.pageTools.pageSizeOptions"
            :page-size="parseInt(saleOrderSet.pageTools.pageSize)"
            :current-page="parseInt(saleOrderSet.pageTools.pageNo)"
            :total="parseInt(saleOrderSet.pageTools.recordCount)"
             layout="total, prev, pager, next, sizes,jumper">
          </el-pagination>
        </div>
        <!--分页  end-->

      </div>
      <!--ziJin-conOrder  start-->

    </div>
    <!--end content-->


  </section>

</template>
<script>
	import helpComponents from '../../../components/help/help'
  export default {
  	components:{helpComponents},
    data() {
      return {
      	vue_tableH:'',
        vue_currentRow: null,
        vue_heightSearch: false,
        vue_allOrder: false,
        
        vue_valueData: '',            //查询时间
        
        orderTotalMoneySum:'',        //金额统计
        orderPaidMoneySum:'',
        orderUnpaidMoneySum:'',
        orderPayStateViewVoList:[],   //支付状态字典
        
        form: {
          name: '',
          level: '',
          department: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          ddlistKey:'',   //付款状态
          memberName:'',  //客户名称
          createTime:'',		//下单时间
          fullTextFields:''	
        },
        saleOrderSet:{
					list:[],			//客户列表数据
					pageTools:{},		//分页数据
					sumInfo:{}			//汇总信息
				},
				helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},
				
				saleOrderQb:{
					offset:'',
					supStartDate:'',
					supEndDate:'',
					memberName:'',
					orderStr:'',
				},
      }
    },

    methods: {
    	vFun_sort(type){
    		if(type.order==='ascending'){
    			this.saleOrderQb.orderStr=type.prop
    		}else if(type.order==='descending'){
    			this.saleOrderQb.orderStr=type.prop +' desc'
    		}else{
    			this.saleOrderQb.orderStr=''
    		};
    		this.queryByPage();
    	},    	
    	query_systemTemplate(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/001000000011"
				}).then((res)=>{
						this.helpData.templateName = res.data.templateName;
						this.helpData.templateRemark = res.data.templateRemark;
						this.helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
			
//---------------收款记录列表数据查询 ------------------------------
			queryByPage(){
				this.axios({
					method: 'post',
					url: "/v3/sale/orders/queryFundMerchantListByPage",
					data:{
						"memberBname":this.saleOrderQb.memberName,
						"orderPayState":this.form.ddlistKey,
						"supStartDate":this.saleOrderQb.supStartDate,
						"supEndDate":this.saleOrderQb.supEndDate,
						"fullTextFilterStr":this.form.fullTextFields,
						"limit":this.saleOrderSet.pageTools.pageSize,
						"offset":(this.saleOrderSet.pageTools.pageNo-1)*this.saleOrderSet.pageTools.pageSize,
						"orderStr":this.saleOrderQb.orderStr,
					}
				}).then((res) => {
					  res.data.list.forEach((item,index,arr)=>{
              item.orderTotalMoney = this.Public.formatMoney(item.orderTotalMoney,2)
              item.orderPaidMoney = this.Public.formatMoney(item.orderPaidMoney,2)
              item.orderUnpaidMoney = this.Public.formatMoney(item.orderUnpaidMoney,2)
            })
						this.saleOrderSet.list = res.data.list;
						this.orderTotalMoneySum=res.data.orderTotalMoneySum;
						this.orderPaidMoneySum=res.data.orderPaidMoneySum;
						this.orderUnpaidMoneySum=res.data.orderUnpaidMoneySum;
						this.saleOrderSet.pageTools =res.data.pageTools;    
						this.saleOrderSet.pageTools.pageSizeOptions = JSON.parse(this.saleOrderSet.pageTools.pageSizeOptions);
						this.fullTextFields="";
						this.vue_heightSearch = false;
				}).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
			},
//--------------根据时间进行过滤查询--------------------------
      dateChange(){
					this.saleOrderQb.supStartDate = this.vue_valueData[0];
					this.saleOrderQb.supEndDate=this.vue_valueData[1];
					this.saleOrderSet.pageTools = this.$store.state.page;
					this.queryByPage();
     },
//--------------根据订单状态查询------------------------------
			queryByDataBillstate(){
				this.saleOrderSet.pageTools = this.$store.state.page;
				this.queryByPage();
			},
//--------------根据客户名称查询------------------------------
			queryByMemberName(){
				this.saleOrderSet.pageTools = this.$store.state.page;
				this.queryByPage();
				this.saleOrderQb.memberName = "";
			},
//----------------跳转个人客户列表---------------------------------
      goTo(){
        this.$router.push('/keHu')
      },
//---------------------------分页     start-----------------------
      handleSizeChange(val) {
        this.saleOrderSet.pageTools.pageSize= val;
				this.queryByPage();
      },
      handleCurrentChange(val) {
        this.saleOrderSet.pageTools.pageNo=val;
			  this.queryByPage();
      },
//---------------高级搜索（已注释） --------------------------------------
      advSearch_searchCancel(){   //高级搜索取消
        this.vue_heightSearch = false;
        this.$refs.Form.resetFields();
      },

      advSearch_searchClear(){    //高级搜索清空
        this.$refs.Form.resetFields();
      },
      advSearch_searchSure(memberName,orderPayState,fullTextFields){
		   		  var startTime = "";
						var endTime = "";
						if(this.form.createTime != ""){
							var dateArray = this.form.createTime.splice(',');
							startTime = dateArray[0];
							endTime = dateArray[1];
						}
		   		   this.saleOrderQb.supStartDate = startTime;
		   		   this.saleOrderQb.supEndDate = endTime;
   		       this.saleOrderQb.offset = (this.saleOrderSet.pageTools.pageNo-1)*this.saleOrderSet.pageTools.pageSize;
		         this.queryByPage();
			},
//---------------查看详情------------------------------------
			row_orderDatails(data){
				localStorage.setItem("orderCode",data);
				localStorage.setItem("activeName","third");
				window.location.hash = "#/orderDatalis"
			},
//---------------查询支付状态----------------------------------
       query_systemDdlist(){
       	   this.axios({
							method: 'post',
							url: "/v3/system/ddlists/00100000020/listAll",
							data:{}
						}).then((res) => {
								this.orderPayStateViewVoList = res.data.list;
						}).catch((err)=>{
					      this.Public.openError(this,err.response.data)
				    });
       }
    },
    created(){
    	this.saleOrderSet.pageTools = this.$store.state.page;
		},
    mounted(){
    	this.vue_tableH = document.documentElement.clientHeight - 355;
      window.onresize = () => {
        this.$refs.contentWrap.style.height = (document.documentElement.clientHeight - 260) + 'px';
      };
//=======================点击下拉箭头回转====================================
      document.querySelector('body').onclick = () => {
        if (this.vue_allOrder == true) {
          this.vue_allOrder = false;
        }
      };
      
      this.query_systemDdlist();
      this.queryByPage();
      //帮助功能
			this.query_systemTemplate();
      
    }
  }
</script>
<style scoped>

  .table-box {
    overflow-y: auto;
  }

  .yS_all {
    line-height: 34px;
    border-top: 1px solid #fa8a95;
    margin-top: 6px;
  }

  .yS_all span {
    display: block;
    float: left;
    width: 50%;
    text-align: center;
    font-size: 14px;
  }

  .div1 > .fund-totalBlance-val {
    padding-top: 25px;
  }

  .slideBtn {
    line-height: 34px;
    margin-right: 16px;
  }

  .ziJin-conOrder > .block {
    float: right;
    margin-top: 10px;
  }

  .el-form {
    overflow: hidden;
  }

  .el-form .el-form-item:last-child {
    width: 100%;
  }

  .el-form-item {
    width: 485px;
    float: left;
    margin-right: 10px;
  }

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
  }

  .height-s-con {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
    margin-bottom: 20px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active, .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter, .slideDown-leave-active {
    height: 0;
    opacity: 0;
  }

  .p {
    text-indent: 10px;
    line-height: 30px;
    cursor: pointer;
  }

  .p em {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .p:hover {
    background: #eef1f9;
    color: #03B8CC;
  }

  .goTo:hover {
    color: #13c19f;
    cursor: pointer;
  }

  .fund-totalBlance-txt {
    font-size: 13px;
  }

  .fund-totalBlance-val {
    font-size: 28px;
    line-height: 42px;
  }

  .div1 {
    background: #fb7884;
    padding-top: 0px !important;
    height: 110px !important;
  }

  .div2 {
    background: #03a9f3;
  }

  .div3 {
    background: #9675ce;
    margin-right: 0px !important;
  }

  .moneyList > .moneyListCon > div {
    height: 85px;
    color: #fff;
    padding-top: 25px;
    text-align: center;
    margin-top: 15px;
  }
  .moneyList > .moneyListCon {
    float: left;
    position: relative;
    width: 33.3%;
  }

  .moneyList {
    width: 100%;
    height: 120px;
    margin-bottom: 10px;
    background-color: #fff;
  }

  section {
    display: flex;
    flex-direction: column;
    flex: 1;

  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 15px;
  }

  .ziJin-conOrder {
    padding: 0px 14px;
  }

  .zJ-header1 {
    padding: 8px 0;
    min-height: 34px;
  }

  .public-left {
    float: left;
  }

  .public-left:hover span {
    color: #13C19F;
  }

  .public-left a, .public-left span.search-openBtn {
    display: block;
    float: left;
    margin-right: 10px;
    padding-right: 0px;
    position: relative;
    height: 36px;
    line-height: 36px;
    z-index: 100;
    cursor: pointer;
  }

  .goods-input input {
    display: block;
    float: left;
    width: 290px;
    height: 34px;
    font-size: 12px;
    border: 0;
    margin-left: 20px;
  }

  .goods-input {
    float: left;
    width: 340px;
    border: 1px solid #cdd9e6;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    margin-left: 10px;
  }

  .goods-input:hover {
    border-color: #13C19F;
    transition: 1s;
  }

  .goods-input i {
    background: url(../../../img/sousuo.png) no-repeat;
    height: 20px;
    width: 20px;
    display: inline-block;
    position: relative;
    top: 7px;
    right: 5px;
    cursor: pointer;
  }

  .high_search {
    line-height: 36px;
    color: #93a6b7;
    margin-left: 4px;
    cursor: pointer;
  }

  .high_search:hover {
    color: #13C19F;
  }
	.block{
		float: right;
	}
	.dingdanshou{
		float: left;
	}
	.fen{
		margin-top: 20px;
	}
</style>
